<template>
  <div class="agents-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify>
          <el-col :span="16">
            <el-button
              type="primary"
              size="small"
              @click="isShowDialog = true"
            >添加页面</el-button>
          </el-col>
          <el-col :span="8">
            <el-input v-model="searchData" placeholder="请输入标题" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="searchFn" />
            </el-input>
          </el-col>
        </el-row>
        <el-divider />
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="title" label="标题" />
          <el-table-column label="内容">
            <template slot-scope="scope">
              <div v-html="scope.row.content" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row.id)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete( scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev, pager, next"
            :page-size="size"
            :current-page="1"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
        <!-- 编辑/新增弹出框 -->
        <el-dialog v-if="isShowDialog" title="添加" :visible="isShowDialog" @close="close">
          <el-form ref="ruleForm" :rules="rules" label-width="80px" :model="formData">
            <el-form-item prop="title" label="标题">
              <el-input v-model="formData.title" />
            </el-form-item>
            <!-- 富文本编辑器 -->
            <editor ref="editor" :content="formData.content" @gettext="editorText" />
            <el-row class="btn" type="flex" justify="end">
              <el-button type="primary" @click="addFn">确认</el-button>
              <el-button @click="close">取消</el-button>
            </el-row>
          </el-form>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getPageList, getPageTotal, addPage, delPage, editPage, geteditPageList } from '@/api/page'
import editor from '@/components/editor/index'
export default {
  components: {
    editor
  },
  data() {
    return {
      tableData: [],
      page: 1,
      size: 5,
      title_contains: '',
      formData: {
        content: '',
        title: ''
      },
      total: 0, // 页面数量
      searchData: '', // 搜索的数据
      isShowDialog: false, // 弹出框的显示隐藏
      rules: {
        title: [
          { required: true, message: '请输入页面名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getpagelist()
  },
  methods: {
    // 获取页面列表
    async getpagelist() {
      const start = (this.page - 1) * this.size
      this.tableData = await getPageList({
        _limit: this.size,
        _start: start,
        title_contains: this.title_contains
      })
      // 获取页面数量
      this.total = await getPageTotal({ title_contains: this.title_contains })
    },
    // 点击翻页
    currentChange(page) {
      this.page = page
      this.getpagelist()
    },
    // 点击隐藏弹出框
    close() {
      this.isShowDialog = false
      this.formData = {
        content: '',
        title: ''
      }
      this.$refs.editor.deleteEditor()
    },
    // 获取富文本编辑器内容
    editorText(text) {
      this.formData.content = text
    },
    // 添加页面
    async addFn() {
      await this.$refs.ruleForm.validate()
      if (this.formData.id) {
        // 编辑
        await editPage(this.formData)
        this.$message.success('编辑成功')
      } else {
        // 新增
        await addPage(this.formData)
        this.$message.success('新增成功')
      }
      // 关闭弹框
      this.close()
      // 清空富文本框
      this.$refs.editor.deleteEditor()
      // 重新获取数据
      this.getpagelist()
    },
    // 删除页面
    handleDelete(id) {
      this.$confirm('此操作将永久删除该页面, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPage(id)
        // 删除后刷新页面
        this.getpagelist()
        this.$message.success('删除成功')
      }).catch(err => {
        console.log(err)
      })
    },
    // 编辑页面
    async handleEdit(id) {
      this.isShowDialog = true
      // 根据id获取页面数据
      this.formData = await geteditPageList(id)
      // 调用富文本组件的方法回显数据
      this.$refs.editor.editFn()
    },
    async searchFn() {
      this.title_contains = this.searchData
      this.page = 1
      await this.getpagelist()
      this.searchData = ''
    }

  }
}
</script>

<style  scoped>
.btn{
    margin-top: 10px;
}
</style>
